<template>
    <div class="form_sum">
        <div class="sum_item" v-if="tags[0]">
            <span class="num" v-if="tags[0].color" :style="`color:${tags[0].color}`">{{ tags[0].num }}</span>
            <span class="num" v-else>{{ tags[0].num }}</span>
            <span class="title">{{ tags[0].title }}</span>
        </div>
        <div class="sum_item" v-if="tags[1]">
            <span class="num" v-if="tags[1].color" :style="`color:${tags[1].color}`">{{ tags[1].num }}</span>
            <span class="num" v-else style="color: #e43f31">{{ tags[1].num }}</span>
            <span class="title">{{ tags[1].title }}</span>
        </div>
        <div class="sum_item" v-if="tags[2]">
            <span class="num" v-if="tags[2].color" :style="`color:${tags[2].color}`">{{ tags[2].num }}</span>

            <span class="num" v-else style="color: #fcc422">{{ tags[2].num }}</span>
            <span class="title">{{ tags[2].title }}</span>
        </div>
        <div class="sum_item" v-if="tags[3]">
            <span class="num" v-if="tags[3].color" :style="`color:${tags[3].color}`">{{ tags[3].num }}</span>
            <span class="num" v-else style="color: #289747">{{ tags[3].num }}</span>
            <span class="title">{{ tags[3].title }}</span>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    },
    props: {
        tags: {
            type: Array,
            default() {
                return []
            },
        },
    },
    methods: {},
}
</script>

<style lang="less" scoped>
@media (max-width: 1900px) {
    .form_sum {
        display: none !important;
    }
}
.form_sum {
    width: 44%;
    height: calc(90% - 46px);
    // height: 2.875rem;

    float: right;
    display: flex;
    justify-content: space-around;
    margin-top: -10px;

    .sum_item {
        width: 20%;
        height: 4.875rem;
        // background-color: pink;
        background-image: url(@/assets/common/form_item_bg.png);
        background-size: 100% 100%;
        position: relative;

        .num {
            color: #6fcff2;
            font-size: 1.35rem;
            position: absolute;
            left: 50%;
            top: 24%;
            transform: translateX(-50%);
        }
        .title {
            color: #f9f9f9;
            font-weight: 600;
            font-size: 0.875rem;
            position: absolute;
            left: 50%;
            top: 60%;
            transform: translateX(-50%);
            // z-index: 99;
        }
    }
}
</style>
